<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="LeftAnimation">
  <n-divider title-placement="center">{{ selectedPel.animations[Key].label }} 动画</n-divider>

  <!-- ♈动画类别:0-子动画;
    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————
    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————
          -->
    <div v-if="selectedPel.animations[Key].opt_an_classify === 0">
      <div class="edit_box">
        <!-- 动画数据值 -->
        <template v-for="(item, index) in selectedPel.an_vals">
          <div class="edit_item">
            <div class="h_info">
              <text style="width: 80px">序号</text>
              <text style="width: 160px; margin-left: 5px; margin-right: 5px">{{ index + 1 }}</text>
            </div>
            <div class="h_info">
              <text style="width: 30px">描述</text>
              <NInput type="text" style="width: 195px; margin-left: 5px; margin-right: 5px" v-model:value="item.descr" />
            </div>
            <div class="h_info">
              <text style="width: 30px">值</text>
              <NInput type="text" style="width: 195px; margin-left: 5px; margin-right: 5px" v-model:value="item.val" />
            </div>
            <div class="h_info">
              <text style="width: 30px">连接</text>
              <NSelect style="width: 195px; margin-left: 5px; margin-right: 5px" size="small"
                v-model:value="item.equipDataId" :options="readEquipDataOpt" />
            </div>
            <div style="height: 10px"></div>
            <!-- 工具图标 -->
            <div class="h_flex_row_center">
              <!-- 新建 -->
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                    v-html="onGetDataManagerIcon('dataAddIcon')" @click="onCreateAnIfo(item)"></svg>
                </template>
                <span>新建</span>
              </NTooltip>
              <!-- 删除 -->
              <div style="width: 30px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                    v-html="onGetDataManagerIcon('dataDeleteIcon')" @click="onDeleteAnIfo(item, index)"></svg>
                </template>
                <span>删除</span>
              </NTooltip>
              <!-- 移动到顶部 -->
              <div style="width: 30px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                    v-html="onGetDataManagerIcon('moveTopLayer')" @click="onMoveTop(item, index)"></svg>
                </template>
                <span>移动到顶部</span>
              </NTooltip>
              <!-- 删移动到底部 -->
              <div style="width: 30px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
                    v-html="onGetDataManagerIcon('moveBottomLayer')" @click="onMoveBottom(item, index)"></svg>
                </template>
                <span>删移动到底部</span>
              </NTooltip>
            </div>
            <div style="height: 10px"></div>
          </div>
        </template>
      </div>
  </div>

  <!-- ♈动画类别:1-样式动画:
——————————————————————————————————————————————————————————————————————————————————————————————————————————————
动画类别:1-样式动画:
轮廓颜色 stroke
    填充颜色 fill
    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————
      -->
    <div v-if="selectedPel.animations[Key].opt_an_classify === 1">
      <!-- ♉ 使能动画; -->
      <div class="h_info">
        <text style="width: 60px">使能动画</text>
        <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].enable" />
      </div>

      <!-- ♋动画模式; -->
      <div class="h_info">
        <text style="width: 60px">动画模式</text>
        <NSelect style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].opt_an_model" :options="anModelOpt" />
        <div style="width: 5px"></div>
      </div>

      <!-- ♏ 动画模式:1-值动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 1">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
      </div>

      <!-- ♐ 动画模式:2-值转换动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 2">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>

        <!-- ♋ 触发条件 -->
        <n-divider>触发条件</n-divider>
        <div class="h_flex_cloum_start">
          <div class="h_flex_row_between">
            <div style="width: 32px">起</div>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[0]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
          <div style="height: 5px"></div>
          <div class="h_flex_row_between">
            <text style="width: 32px">终</text>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[1]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
        </div>
        <!-- ♊ 动画获取值;动画判断值-->
        <n-divider v-if="selectedPel.animations[Key].enable">获取值;判断值</n-divider>
        <div v-if="selectedPel.animations[Key].enable">
          <div class="h_info">
            <text style="width: 90px">获取值</text>
            <text class="h_info_val">{{ workStore.anGetVal }}</text>
          </div>
          <div class="h_info">
            <text style="width: 90px">判断值</text>
            <text class="h_info_val">{{ workStore.anJudgeVal }}</text>
          </div>
        </div>

        <!-- ♏ 使用值-->
        <n-divider>使用值</n-divider>
        <!-- ♏ ♏ 使用值选项; -->
        <div class="h_info">
          <text style="width: 40px">选项</text>
          <NSelect v-model:value="selectedPel.animations[Key].opt_use_val" :options="useValOpt" />
          <div style="width: 10px; margin-right: 10px"></div>
        </div>
        <!-- ♏ ♏ 使用值选项:1-起始和结束; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 1" class="h_flex_cloum_start" style="margin-left: 10px">
          <!-- 颜色1  -->
          <div class="h_info">
            <text style="width: 66px">颜色1:</text>
            <NColorPicker v-model:value="selectedPel.animations[Key].from_to[0]" :actions="['confirm']" :modes="['rgb']"
              :swatches="colorOpt" :show-alpha="true" />
            <div style="width: 10px"></div>
          </div>
          <!-- 颜色2  -->
          <div class="h_info">
            <text style="width: 66px">颜色2:</text>
            <NColorPicker v-model:value="selectedPel.animations[Key].from_to[1]" :actions="['confirm']" :modes="['rgb']"
              :swatches="colorOpt" :show-alpha="true" />
            <div style="width: 10px"></div>
          </div>
        </div>
        <!-- ♏ ♏ 使用值选项:2-多值; -->
        <NInput v-if="selectedPel.animations[Key].opt_use_val === 2" style="width: 100%" type="text"
          v-model:value="selectedPel.animations[Key].mult_val" />
        <!-- ♏ ♏ 使用值选项:3-线性比例; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 3">
          <!-- 领域 -->
          <div class="h_flex_column h_padding5">
            <div class="h_form_item_tiele">领域</div>
            <div class="h_info">
              <NInputNumber v-model:value="selectedPel.animations[Key].line_domain[0]" />
              <text>至</text>
              <NInputNumber v-model:value="selectedPel.animations[Key].line_domain[1]" />
            </div>
          </div>
          <!-- 范围 -->
          <div class="h_flex_column h_padding5">
            <div class="h_form_item_tiele2">范围</div>
            <div class="h_info">
              <NInputNumber v-model:value="selectedPel.animations[Key].line_range[0]" />
              <text>至</text>
              <NInputNumber v-model:value="selectedPel.animations[Key].line_range[1]" />
            </div>
          </div>
        </div>

        <!-- ♍ 动画延时及时长 -->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>

      <!-- ♑ 动画模式:3-自动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 3">
        <!-- ♏ 使用值-->
        <n-divider>使用值</n-divider>
        <!-- ♏ ♏ 使用值选项; -->
        <div class="h_info">
          <text style="width: 40px">选项</text>
          <NSelect v-model:value="selectedPel.animations[Key].opt_use_val" :options="useValOpt" />
          <div style="width: 10px"></div>
        </div>
        <!-- ♏ ♏ 使用值选项:1-起始和结束; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 1" class="h_flex_cloum_start" style="margin-left: 10px">
          <!-- 颜色1  -->
          <div class="h_info">
            <text style="width: 66px">颜色1:</text>
            <NColorPicker v-model:value="selectedPel.animations[Key].from_to[0]" :actions="['confirm']" :modes="['rgb']"
              :swatches="colorOpt" :show-alpha="true" />
            <div style="width: 10px"></div>
          </div>
          <!-- 颜色2  -->
          <div class="h_info">
            <text style="width: 66px">颜色2:</text>
            <NColorPicker v-model:value="selectedPel.animations[Key].from_to[1]" :actions="['confirm']" :modes="['rgb']"
              :swatches="colorOpt" :show-alpha="true" />
            <div style="width: 10px"></div>
          </div>
        </div>
        <!-- ♏ ♏使用值选项:2-多值; -->
        <NInput v-if="selectedPel.animations[Key].opt_use_val === 2" style="width: 100%" type="text"
          v-model:value="selectedPel.animations[Key].mult_val" />

        <!-- ♍ 动画延时及时长-->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>
  </div>

  <!-- ♈动画类别:2-变换动画: 
——————————————————————————————————————————————————————————————————————————————————————————————————————————————
动画类别:2-变换动画: 
旋转 rotate; 
水平移动 translateX; 
垂直移动 translateY; 
缩放 scale;
水平拉伸 skewX;
      垂直拉伸 skewY;
      ——————————————————————————————————————————————————————————————————————————————————————————————————————————————
      -->
    <div v-if="selectedPel.animations[Key].opt_an_classify === 2">
      <!-- ♉  使能动画 -->
      <div class="h_info">
        <text style="width: 60px">使能动画</text>
        <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].enable" />
      </div>
      <!-- ♓ 动画模式-->
      <div class="h_info">
        <text style="width: 60px">动画模式</text>
        <NSelect style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].opt_an_model" :options="anModelOpt" />
        <div style="width: 5px"></div>
      </div>
      <!-- ♏ 动画模式:1-值动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 1">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♊ 动画获取值;-->
        <n-divider v-if="selectedPel.animations[Key].enable">获取值</n-divider>
        <div v-if="selectedPel.animations[Key].enable">
          <div class="h_info">
            <text style="width: 90px">获取值</text>
            <text class="h_info_val">{{ workStore.anGetVal }}</text>
          </div>
        </div>
      </div>
      <!-- ♐ 动画模式:2-值转换动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 2">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>

        <!-- ♋ 触发条件 -->
        <n-divider>触发条件</n-divider>
        <div class="h_flex_cloum_start">
          <div class="h_flex_row_between">
            <div style="width: 32px">起</div>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[0]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
          <div style="height: 5px"></div>
          <div class="h_flex_row_between">
            <text style="width: 32px">终</text>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[1]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
        </div>
        <!-- ♊ 动画获取值;动画判断值-->
        <n-divider v-if="selectedPel.animations[Key].enable">获取值;判断值</n-divider>
        <div v-if="selectedPel.animations[Key].enable">
          <div class="h_info">
            <text style="width: 90px">获取值</text>
            <text class="h_info_val">{{ workStore.anGetVal }}</text>
          </div>
          <div class="h_info">
            <text style="width: 90px">判断值</text>
            <text class="h_info_val">{{ workStore.anJudgeVal }}</text>
          </div>
        </div>

        <!-- ♏ 使用值-->
        <n-divider>使用值</n-divider>
        <!-- ♏ ♏ 使用值选项; -->
        <div class="h_info">
          <text style="width: 40px">选项</text>
          <NSelect v-model:value="selectedPel.animations[Key].opt_use_val" :options="useValOpt" />
          <div style="width: 10px; margin-right: 10px"></div>
        </div>
        <!-- ♏ ♏ 使用值选项:1-起始和结束; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 1" class="h_flex_cloum_start" style="margin-left: 5px">
          <!-- 旋转 rotate -->
          <div v-if="selectedPel.animations[Key].key === 'rotate'">
            <!-- 起始角度  -->
            <div class="h_flex_row">
              <text style="width: 65px">起始角:</text>
              <div class="h_flex_column" style="width: 230px; margin-left: 5px; margin-right: 5px">
                <NSlider :min="-360" :max="360" v-model:value="selectedPel.animations[Key].from_to[0]" />
                <NInputNumber :min="-360" :max="360" :step="0.01"
                  v-model:value="selectedPel.animations[Key].from_to[0]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 结束角度  -->
            <div class="h_flex_row">
              <text style="width: 65px">结束角:</text>
              <div class="h_flex_column" style="width: 230px; margin-left: 5px; margin-right: 5px">
                <NSlider :min="-360" :max="360" v-model:value="selectedPel.animations[Key].from_to[1]" />
                <NInputNumber :min="-360" :max="360" :step="0.01"
                  v-model:value="selectedPel.animations[Key].from_to[1]" />
              </div>
              <div style="width: 10px"></div>
            </div>
          </div>
          <!-- 缩放 scale -->
          <div v-if="selectedPel.animations[Key].key === 'scale'">
            <!-- 起点坐标X1  -->
            <div class="h_info">
              <text style="width: 30px">x1:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[0]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[0]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 起点坐标Y1  -->
            <div class="h_info">
              <text style="width: 30px">y1:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[1]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[1]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 终点坐标X2  -->
            <div class="h_info">
              <text style="width: 30px">x2:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[2]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[2]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 终点坐标Y2  -->
            <div class="h_info">
              <text style="width: 30px">y2:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[3]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[3]" />
              </div>
              <div style="width: 10px"></div>
            </div>
          </div>
          <!-- 平移 translate -->
          <div v-if="selectedPel.animations[Key].key === 'translate'">
            <!-- 起点坐标X1  -->
            <div class="h_info">
              <text style="width: 30px">x1:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[0]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[0]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 起点坐标Y1  -->
            <div class="h_info">
              <text style="width: 30px">y1:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[1]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[1]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 终点坐标X2  -->
            <div class="h_info">
              <text style="width: 30px">x2:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[2]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[2]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 终点坐标Y2  -->
            <div class="h_info">
              <text style="width: 30px">y2:</text>
              <div class="h_flex_column" style="width: 100%">
                <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[3]" />
                <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                  v-model:value="selectedPel.animations[Key].from_to[3]" />
              </div>
              <div style="width: 10px"></div>
            </div>
          </div>
          <!-- 水平拉伸 skewX -->
          <div v-if="selectedPel.animations[Key].key === 'skewX'">
            <!-- 起始角度  -->
            <div class="h_flex_row">
              <text style="width: 65px">起始角:</text>
              <div class="h_flex_column" style="width: 230px; margin-left: 5px; margin-right: 5px">
                <NSlider :min="-360" :max="360" v-model:value="selectedPel.animations[Key].from_to[0]" />
                <NInputNumber :min="-360" :max="360" :step="0.01"
                  v-model:value="selectedPel.animations[Key].from_to[0]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 结束角度  -->
            <div class="h_flex_row">
              <text style="width: 65px">结束角:</text>
              <div class="h_flex_column" style="width: 230px; margin-left: 5px; margin-right: 5px">
                <NSlider :min="-360" :max="360" v-model:value="selectedPel.animations[Key].from_to[1]" />
                <NInputNumber :min="-360" :max="360" :step="0.01"
                  v-model:value="selectedPel.animations[Key].from_to[1]" />
              </div>
              <div style="width: 10px"></div>
            </div>
          </div>
          <!-- 垂直拉伸 skewX -->
          <div v-if="selectedPel.animations[Key].key === 'skewY'">
            <!-- 起始角度  -->
            <div class="h_flex_row">
              <text style="width: 65px">起始角:</text>
              <div class="h_flex_column" style="width: 230px; margin-left: 5px; margin-right: 5px">
                <NSlider :min="-360" :max="360" v-model:value="selectedPel.animations[Key].from_to[0]" />
                <NInputNumber :min="-360" :max="360" :step="0.01"
                  v-model:value="selectedPel.animations[Key].from_to[0]" />
              </div>
              <div style="width: 10px"></div>
            </div>
            <!-- 结束角度  -->
            <div class="h_flex_row">
              <text style="width: 65px">结束角:</text>
              <div class="h_flex_column" style="width: 230px; margin-left: 5px; margin-right: 5px">
                <NSlider :min="-360" :max="360" v-model:value="selectedPel.animations[Key].from_to[1]" />
                <NInputNumber :min="-360" :max="360" :step="0.01"
                  v-model:value="selectedPel.animations[Key].from_to[1]" />
              </div>
              <div style="width: 10px"></div>
            </div>
          </div>
        </div>

        <!-- ♏ ♏使用值选项:2-多值; -->
        <NInput v-if="selectedPel.animations[Key].opt_use_val === 2" style="width: 100%" type="text"
          v-model:value="selectedPel.animations[Key].mult_val" />
        <!-- ♏ ♏使用值选项:3-线性比例; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 3">
          <!-- 领域 -->
          <div class="h_flex_column h_padding5">
            <div class="h_form_item_tiele">领域</div>
            <div class="h_info">
              <NInputNumber v-model:value="selectedPel.animations[Key].line_domain[0]" />
              <text>至</text>
              <NInputNumber v-model:value="selectedPel.animations[Key].line_domain[1]" />
            </div>
          </div>
          <!-- 范围 -->
          <div class="h_flex_column h_padding5">
            <div class="h_form_item_tiele2">范围</div>
            <div class="h_info">
              <NInputNumber v-model:value="selectedPel.animations[Key].line_range[0]" />
              <text>至</text>
              <NInputNumber v-model:value="selectedPel.animations[Key].line_range[1]" />
            </div>
          </div>
        </div>

        <!-- ♍ 动画延时及时长-->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>
      <!-- ♑ 动画模式:3-自动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 3">
        <!-- ♏ 使用值-->
        <n-divider>使用值</n-divider>
        <!-- ♏ ♏ 使用值选项; -->
        <div class="h_info">
          <text style="width: 40px">选项</text>
          <NSelect v-model:value="selectedPel.animations[Key].opt_use_val" :options="useValOpt" />
          <div style="width: 10px"></div>
        </div>
        <!-- ♏ ♏ 使用值选项:1-起始和结束; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 1" class="h_flex_cloum_start" style="margin-left: 10px">
          <!-- 起点坐标X1  -->
          <div class="h_info">
            <text style="width: 30px">x1:</text>
            <div class="h_flex_column" style="width: 100%">
              <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[0]" />
              <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                v-model:value="selectedPel.animations[Key].from_to[0]" />
            </div>
            <div style="width: 10px"></div>
          </div>
          <!-- 起点坐标Y1  -->
          <div class="h_info">
            <text style="width: 30px">y1:</text>
            <div class="h_flex_column" style="width: 100%">
              <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[1]" />
              <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                v-model:value="selectedPel.animations[Key].from_to[1]" />
            </div>
            <div style="width: 10px"></div>
          </div>
          <!-- 终点坐标X2  -->
          <div class="h_info">
            <text style="width: 30px">x2:</text>
            <div class="h_flex_column" style="width: 100%">
              <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[2]" />
              <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                v-model:value="selectedPel.animations[Key].from_to[2]" />
            </div>
            <div style="width: 10px"></div>
          </div>
          <!-- 终点坐标Y2  -->
          <div class="h_info">
            <text style="width: 30px">y2:</text>
            <div class="h_flex_column" style="width: 100%">
              <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].from_to[3]" />
              <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
                v-model:value="selectedPel.animations[Key].from_to[3]" />
            </div>
            <div style="width: 10px"></div>
          </div>
        </div>
        <!-- ♏ ♏ 使用值选项:2-多值; -->
        <NInput v-if="selectedPel.animations[Key].opt_use_val === 2" style="width: 100%" type="text"
          v-model:value="selectedPel.animations[Key].mult_val" />

        <!-- ♍ 动画延时及时长-->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>
  </div>

  <!-- ♈动画类别:3-属性动画:
——————————————————————————————————————————————————————————————————————————————————————————————————————————————
动画类别:3-属性动画:
                  轮廓宽度 strokeWidth
                  虚线 strokeDasharray
                  线条流动 strokeDashoffset
                  透明度_元素 opacity
                  透明度_填充 fillOpacity
                  透明度_轮廓 strokeOpacity
                  圆CX坐标_水平移动 c
                  圆CY坐标_垂直移动 cy
                  半径 radius
                  半径X radiusX
                  半径Y radiusY
                  水平移动 left
                                      垂直移动 top
                    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————
                    -->
    <div v-if="selectedPel.animations[Key].opt_an_classify === 3">
      <!-- ♉  使能动画 -->
      <div class="h_info">
        <text style="width: 60px">使能动画</text>
        <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].enable" />
      </div>
      <!-- ♓ 动画模式-->
      <div class="h_info">
        <text style="width: 60px">动画模式</text>
        <NSelect style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].opt_an_model" :options="anModelOpt" />
        <div style="width: 5px"></div>
      </div>
      <!-- ♏ 动画模式:1-值动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 1">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
      </div>
      <!-- ♐ 动画模式:2-值转换动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 2">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>

        <!-- ♋ 触发条件 -->
        <n-divider>触发条件</n-divider>
        <div class="h_flex_cloum_start">
          <div class="h_flex_row_between">
            <div style="width: 32px">起</div>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[0]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
          <div style="height: 5px"></div>
          <div class="h_flex_row_between">
            <text style="width: 32px">终</text>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[1]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
        </div>
        <!-- ♊ 动画获取值;动画判断值-->
        <n-divider v-if="selectedPel.animations[Key].enable">获取值;判断值</n-divider>
        <div v-if="selectedPel.animations[Key].enable">
          <div class="h_info">
            <text style="width: 90px">获取值</text>
            <text class="h_info_val">{{ workStore.anGetVal }}</text>
          </div>
          <div class="h_info">
            <text style="width: 90px">判断值</text>
            <text class="h_info_val">{{ workStore.anJudgeVal }}</text>
          </div>
        </div>

        <!-- ♏ 使用值-->
        <n-divider>使用值</n-divider>
        <!-- ♏ ♏ 使用值选项; -->
        <div class="h_info">
          <text style="width: 40px">选项</text>
          <NSelect v-model:value="selectedPel.animations[Key].opt_use_val" :options="useValOpt" />
          <div style="width: 10px; margin-right: 10px"></div>
        </div>
        <!-- ♏ ♏ 使用值选项:1-起始和结束; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 1" class="h_flex_cloum_start" style="margin-left: 10px">
          <div class="h_flex_row_between">
            <div style="width: 32px">起</div>
            <NInputNumber v-model:value="selectedPel.animations[Key].from_to[0]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
          <div style="height: 5px"></div>
          <div class="h_flex_row_between">
            <text style="width: 32px">终</text>
            <NInputNumber v-model:value="selectedPel.animations[Key].from_to[1]" />
            <div style="width: 10px; margin-right: 10px"></div>
          </div>
        </div>
        <!-- ♏ ♏ 使用值选项:2-多值; -->
        <NInput v-if="selectedPel.animations[Key].opt_use_val === 2" style="width: 100%" type="text"
          v-model:value="selectedPel.animations[Key].mult_val" />
        <!-- ♏ ♏ 使用值选项:3-线性比例; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 3">
          <!-- 领域 -->
          <div class="h_flex_column h_padding5">
            <div class="h_form_item_tiele">领域</div>
            <div class="h_info">
              <NInputNumber v-model:value="selectedPel.animations[Key].line_domain[0]" />
              <text>至</text>
              <NInputNumber v-model:value="selectedPel.animations[Key].line_domain[1]" />
            </div>
          </div>
          <!-- 范围 -->
          <div class="h_flex_column h_padding5">
            <div class="h_form_item_tiele2">范围</div>
            <div class="h_info">
              <NInputNumber v-model:value="selectedPel.animations[Key].line_range[0]" />
              <text>至</text>
              <NInputNumber v-model:value="selectedPel.animations[Key].line_range[1]" />
            </div>
          </div>
        </div>

        <!-- ♍ 动画延时及时长-->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>
      <!-- ♑ 动画模式:3-自动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 3">
        <!-- ♏ 使用值-->
        <n-divider>使用值</n-divider>
        <!-- ♏ ♏ 使用值选项; -->
        <div class="h_info">
          <text style="width: 40px">选项</text>
          <NSelect v-model:value="selectedPel.animations[Key].opt_use_val" :options="useValOpt" />
          <div style="width: 10px"></div>
        </div>
        <!-- ♏ ♏ 使用值选项:1-起始和结束; -->
        <div v-if="selectedPel.animations[Key].opt_use_val === 1" class="h_flex_cloum_start" style="margin-left: 10px">
          <div class="h_flex_row_between">
            <div style="width: 32px">起</div>
            <NInputNumber v-model:value="selectedPel.animations[Key].from_to[0]" />
            <div style="width: 10px"></div>
          </div>
          <div style="height: 5px"></div>
          <div class="h_flex_row_between h_info">
            <text style="width: 32px">终</text>
            <NInputNumber v-model:value="selectedPel.animations[Key].from_to[1]" />
            <div style="width: 10px"></div>
          </div>
        </div>
        <!-- ♏ ♏ 使用值选项:2-多值; -->
        <NInput v-if="selectedPel.animations[Key].opt_use_val === 2" style="width: 100%" type="text"
          v-model:value="selectedPel.animations[Key].mult_val" />

        <!-- ♍ 动画延时及时长 -->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>
    </div>

    <!-- ♈动画类别:4-线性动画; -->
    <div v-if="selectedPel.animations[Key].opt_an_classify === 4">
      <!-- ♉  使能动画 -->
      <div class="h_info">
        <text style="width: 60px">使能动画</text>
        <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].enable" />
      </div>
      <!-- ♓ 动画模式-->
      <div class="h_info">
        <text style="width: 60px">动画模式</text>
        <NSelect style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].opt_an_model" :options="anModelOpt" />
        <div style="width: 5px"></div>
      </div>
      <!-- ♏ 动画模式:1-值动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 1">
        <text style="width: 90px">提示: 线性动画, 无_值动画功能</text>
      </div>
      <!-- ♐ 动画模式:2-值转换动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 2">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>

        <!-- ♋ 触发条件 -->
        <n-divider>触发条件</n-divider>
        <div class="h_flex_cloum_start">
          <div class="h_flex_row_between">
            <div style="width: 32px">起</div>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[0]" />
            <div style="width: 10px"></div>
          </div>
          <div style="height: 5px"></div>
          <div class="h_flex_row_between">
            <text style="width: 32px">终</text>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[1]" />
            <div style="width: 10px"></div>
          </div>
        </div>
        <!-- ♊ 动画获取值;动画判断值-->
        <n-divider v-if="selectedPel.animations[Key].enable">获取值;判断值</n-divider>
        <div v-if="selectedPel.animations[Key].enable">
          <div class="h_info">
            <text style="width: 90px">获取值</text>
            <text class="h_info_val">{{ workStore.anGetVal }}</text>
          </div>
          <div class="h_info">
            <text style="width: 90px">判断值</text>
            <text class="h_info_val">{{ workStore.anJudgeVal }}</text>
          </div>
        </div>
        <!----------------------------------------------------------------------------- 间隔线-->
        <n-divider>路径坐标</n-divider>
        <n-button style="width: 100%; margin-right: 30px" @click="onGetPathVal">在画布中获取路径坐标</n-button>
        <!-- 起点坐标X1  -->
        <div class="h_info">
          <text style="width: 30px">x1:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[0].x" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[0].x" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- 起点坐标Y1  -->
        <div class="h_info">
          <text style="width: 30px">y1:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[0].y" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[0].y" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- 终点坐标X2  -->
        <div class="h_info">
          <text style="width: 30px">x2:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[1].x" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[1].x" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- 终点坐标Y2  -->
        <div class="h_info">
          <text style="width: 30px">y2:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[1].y" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[1].y" />
          </div>
          <div style="width: 10px"></div>
        </div>

        <!-- ♍ 动画延时及时长 -->
        <n-divider>动画延时及时长 </n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
          <div style="width: 10px"></div>
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
          <div style="width: 10px"></div>
        </div>
      </div>
      <!-- ♑ 动画模式:3-自动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 3">
        <!----------------------------------------------------------------------------- 间隔线-->
        <n-divider>路径坐标</n-divider>
        <n-button style="width: 100%; margin-right: 30px" @click="onGetPathVal">在画布中获取路径坐标</n-button>
        <!-- 起点坐标X1  -->
        <div class="h_info">
          <text style="width: 30px">x1:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[0].x" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[0].x" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- 起点坐标Y1  -->
        <div class="h_info">
          <text style="width: 30px">y1:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[0].y" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[0].y" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- 终点坐标X2  -->
        <div class="h_info">
          <text style="width: 30px">x2:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[1].x" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[1].x" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- 终点坐标Y2  -->
        <div class="h_info">
          <text style="width: 30px">y2:</text>
          <div class="h_flex_column" style="width: 100%">
            <NSlider :min="sliderMin" :max="sliderMax" v-model:value="selectedPel.animations[Key].path_val[1].y" />
            <NInputNumber :min="sliderMin" :max="sliderMax" :step="sliderStep"
              v-model:value="selectedPel.animations[Key].path_val[1].y" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!--♍ 动画延时及时长 -->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>
    </div>

    <!-- ♈动画类别:5-路径; -->
    <div v-if="selectedPel.animations[Key].opt_an_classify === 5">
      <!-- ♉  使能动画 -->
      <div class="h_info">
        <text style="width: 60px">使能动画</text>
        <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].enable" />
      </div>
      <!-- ♓ 动画模式-->
      <div class="h_info">
        <text style="width: 60px">动画模式</text>
        <NSelect style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].opt_an_model" :options="anModelOpt" />
        <div style="width: 5px"></div>
      </div>
      <!-- ♏ 动画模式:1-值动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 1">
        <text style="width: 90px">提示: 线性动画, 无_值动画功能</text>
      </div>
      <!-- ♐ 动画模式:2-值转换动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 2">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-right: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>

        <!-- ♋ 触发条件 -->
        <n-divider>触发条件</n-divider>
        <div class="h_flex_cloum_start">
          <div class="h_flex_row_between">
            <div style="width: 32px">起</div>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[0]" />
            <div style="width: 10px"></div>
          </div>
          <div style="height: 5px"></div>
          <div class="h_flex_row_between">
            <text style="width: 32px">终</text>
            <NInputNumber v-model:value="selectedPel.animations[Key].trigger[1]" />
            <div style="width: 10px"></div>
          </div>
        </div>
        <!-- ♊ 动画获取值;动画判断值-->
        <n-divider v-if="selectedPel.animations[Key].enable">获取值;判断值</n-divider>
        <div v-if="selectedPel.animations[Key].enable">
          <div class="h_info">
            <text style="width: 90px">获取值</text>
            <text class="h_info_val">{{ workStore.anGetVal }}</text>
          </div>
          <div class="h_info">
            <text style="width: 90px">判断值</text>
            <text class="h_info_val">{{ workStore.anJudgeVal }}</text>
          </div>
        </div>
        <!-- ♑ ♑ 获取路径-->
        <n-divider>获取路径</n-divider>
        <NSelect style="width: 200px; margin-right: 5px" size="small" :consistent-menu-width="false"
          v-model:value="selectedPel.animations[Key].path_id" :options="pathIdOpt" />

        <!-- ♍ 动画延时及时长 -->
        <n-divider>动画延时及时长 </n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
          <div style="width: 10px"></div>
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
          <div style="width: 10px"></div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
          <div style="width: 10px"></div>
        </div>
      </div>
      <!-- ♑ 动画模式:3-自动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 3">
        <!-- ♑ ♑ 获取路径-->
        <n-divider>获取路径</n-divider>
        <NSelect style="width: 230px; margin-right: 5px" size="small" :consistent-menu-width="false"
          v-model:value="selectedPel.animations[Key].path_id" :options="pathIdOpt" />

        <!-- ♍ 动画延时及时长 -->
        <n-divider>动画延时及时长</n-divider>
        <!-- ♍ ♍ 动画延时 -->
        <div class="h_info">
          <text style="width: 50px">延时:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
            <NInputNumber :min="0" :max="100" :step="0.5" v-model:value="selectedPel.animations[Key].begin" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>
        <!-- ♍ ♍ 动画时长 -->
        <div class="h_info">
          <text style="width: 50px">时长:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
            <NInputNumber :min="0.01" :max="100" :step="0.1" v-model:value="selectedPel.animations[Key].dur" />
          </div>
          <div style="width: 10px; margin-right: 10px">秒</div>
        </div>

        <!-- ♒ 重复 -->
        <n-divider>重复</n-divider>
        <!-- ♒♒ 重复选项:1-无限循环; -->
        <div class="h_info">
          <text class="h_info_lable">重复选项</text>
          <NSelect class="h_info_val" v-model:value="selectedPel.animations[Key].opt_repeat" :options="anRepeatOpt" />
        </div>
        <!-- ♒♒ 重复选项:2-按次重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 2" class="h_info">
          <text class="h_info_lable">重复次数:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
            <NInputNumber :min="1" :max="1000" :step="1" v-model:value="selectedPel.animations[Key].repeat_count" />
          </div>
        </div>
        <!-- ♒♒ 重复选项:3-按时长重复; -->
        <div v-if="selectedPel.animations[Key].opt_repeat === 3" class="h_info">
          <text class="h_info_lable">按时间重复 秒:</text>
          <div class="h_flex_column h_info_val">
            <NSlider :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
            <NInputNumber :min="500" :max="10000" :step="1" v-model:value="selectedPel.animations[Key].repeat_dur" />
          </div>
        </div>
      </div>
    </div>

    <!-- ♈动画类别:1-文本内容动画; -->
    <div v-if="selectedPel.animations[Key].opt_an_classify === 6">
      <!-- ♉ 使能动画; -->
      <div class="h_info">
        <text style="width: 60px">使能动画</text>
        <NSwitch style="width: 160px; margin-left: 5px; margin-right: 5px"
          v-model:value="selectedPel.animations[Key].enable" />
      </div>

      <!-- ♏ 动画模式:1-值动画; -->
      <div class="edit_box" v-if="selectedPel.animations[Key].opt_an_model === 1">
        <!-- ♒ 动画使用的数据-->
        <n-divider>动画使用的数据</n-divider>
        <!-- ♒♒ 父连接 -->
        <div v-if="selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px; margin-right: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_parent_set" :options="useParentSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:0-父数据 -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 0">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">父数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_parent" :options="parentAnValOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_parent_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
        <!-- ♒♒ 子连接 -->
        <div v-if="!selectedPel.animations[Key].use_data.is_use_parent" class="h_flex_column">
          <!-- ♐♐♐ 使用的数据选项  -->
          <text style="margin-left: 5px">使用的数据选项:</text>
          <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
            v-model:value="selectedPel.animations[Key].use_data.opt_use_sub_set" :options="useSubSetOpt" />
          <!-- ♐♐♐ 动画使用的数据:1-图元数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 1">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">图元数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small" :consistent-menu-width="false"
              v-model:value="selectedPel.animations[Key].use_data.id_pel_data" :options="pelDataOpt" />
          </template>
          <!-- ♐♐♐ 动画使用的数据:2-设备数据; -->
          <template v-if="selectedPel.animations[Key].use_data.opt_use_sub_set === 2">
            <div style="height: 10px"></div>
            <text style="margin-left: 5px">设备数据值：</text>
            <NSelect style="width: 230px; margin-left: 5px" size="small"
              v-model:value="selectedPel.animations[Key].use_data.id_equip_data" :options="readEquipDataOpt" />
          </template>
        </div>
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
import { useMessage } from 'naive-ui';
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetUUID,
  onGetDataManagerIcon,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useStaticStore } from "@/store/staticStore"; // 静态
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const staticStore = useStaticStore(); // 静态
const workStore = useWorkStore(); // 设备数据
const message = useMessage()// 消息
/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 图元数据选项 */
const pelDataOpt = computed(() => canvasStore.pelDataOpt);
/** 设备数据读选项 */
const readEquipDataOpt = computed(() => canvasStore.readEquipDataOpt);
/** 父动画值选项 */
let parentAnValOpt = computed(() => canvasStore.parentAnValOpt);
/** 路径id选项 */
let pathIdOpt = computed(() => canvasStore.pathIdOpt);
/** 最小值 */
let sliderMin = computed(() => canvasStore.sliderMin);
/** 最大值 */
let sliderMax = computed(() => canvasStore.sliderMax);
/** 步距值 */
let sliderStep = computed(() => canvasStore.sliderStep);
/** 图标尺寸 */
const IconSize = 26;
/** 动画参数状态-动画键 */
let Key = String(canvasStore.animatKey);
/** 选择的图元数据 */
let selectedPel = canvasStore.selectedPel;

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 从静态存储 引入 选项
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/** 动画模式选项 */
const anModelOpt = staticStore.anModelOpt;
/** 父链接数据_选项:0_父数据; 1_图元数据;2_设备数据 */
const useParentSetOpt = staticStore.useParentSetOpt;
/** 子链接数据_选项:1_图元数据;2_设备数据 */
const useSubSetOpt = staticStore.useSubSetOpt;
/** 子动画链接_选项 */
const subAnLinkOpt = staticStore.subAnLinkOpt;
/** 使用值选项 */
const useValOpt = staticStore.useValOpt;
/** 重复选项 */
const anRepeatOpt = staticStore.anRepeatOpt;
/** 颜色选项卡 */
const colorOpt = staticStore.colorOpt;

/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */
/** 获取线性路径值 */
const onGetPathVal = () => {
  // console.log("获取线性路径坐标");
  canvasStore.ctrlIconDataSet = []; //清理-控制图标数据
  canvasStore.workState = 70; // 工作状态_画布平移
};

/** 新建动画参数 */
const onCreateAnIfo = (item: any) => {
  // console.log("新建动画参数");
  // console.log(item);
  selectedPel.an_vals.push({
    key: onGetUUID(),
    descr: "描述内容", // 描述
    val: "0",
    /** 设备数据_id */
    equipDataId: "none",
  });
  message.success("新建动画参数，成功")
};

/** 删除动画参数 */
const onDeleteAnIfo = (item: any, index: number) => {
  // console.log("删除动画参数");
  // console.log(item);
  let findKey = String(item.key);
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 判断 顶部数据不能删除
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (index === 0) {
    message.error("顶部数据不能删除")
    canvasStore.tips = "顶部数据不能删除";
    return;
  }
  /** 新动画值 */
  let newAnVal = [];

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 删除选定项
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝 */
  let copyAnVal = JSON.parse(JSON.stringify(selectedPel.an_vals));
  for (let index = 0; index < copyAnVal.length; index++) {
    const element = copyAnVal[index];
    if (element.key !== findKey) {
      newAnVal.push(element);
    }
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  selectedPel.an_vals = newAnVal;
  message.success("删除动画参数，成功")
  canvasStore.tips = "删除动画参数，成功";
};

/** 移动到顶部 */
const onMoveTop = (item: any, index: number) => {
  // console.log("移动到顶部");
  // console.log(item);

  /** 查询键 */
  let findKey = String(item.key);
  /** 新动画值 */
  let newAnVal = [];
  /** 移动项 */
  let moveItem = JSON.parse(JSON.stringify(item));

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历-判断是否为顶部
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (index === 0) {
    message.error("移动到顶部，已经在顶部")
    canvasStore.tips = "移动到顶部，已经在顶部";
    return;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 删除选定项
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝 */
  let copyAnVal = JSON.parse(JSON.stringify(selectedPel.an_vals));
  for (let index = 0; index < copyAnVal.length; index++) {
    const element = copyAnVal[index];
    if (element.key !== findKey) {
      newAnVal.push(element);
    }
  }
  newAnVal.unshift(moveItem); //在顶部添加

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  selectedPel.an_vals = newAnVal;
  message.success("移动到顶部，成功")
  canvasStore.tips = "移动成功";
};

/** 移动到底部 */
const onMoveBottom = (item: any, index: number) => {
  // console.log("移动到底部");
  // console.log(item);
  /** 查询键 */
  let findKey = String(item.key);
  /** 新动画值 */
  let newAnVal = [];
  /** 索引值 */
  let indexVal = Number(selectedPel.an_vals.length - 1);
  /** 移动项 */
  let moveItem = JSON.parse(JSON.stringify(item));

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 判断是否为底部
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (index === indexVal) {
    message.error("移动到底部，已经在底部")
    canvasStore.tips = "移动到底部，已经在底部";
    return;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 删除选定项
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝 */
  let copyAnVal = JSON.parse(JSON.stringify(selectedPel.an_vals));
  for (let index = 0; index < copyAnVal.length; index++) {
    const element = copyAnVal[index];
    if (element.key !== findKey) {
      newAnVal.push(element);
    }
  }
  newAnVal.push(moveItem); //在底部添加

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  selectedPel.an_vals = newAnVal;
  message.success("移动到底部，成功")
  canvasStore.tips = "移动到底部，成功";
};

/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */
onMounted(() => {
  // console.log("钩子函数_挂载后");
});
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

.LeftAnimation {
  width: 100%;
  height: 100%;
  user-select: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  font-size: 14px;
  color: #ffffff;
  background-color: rgb(80, 80, 80);
}

.edit_box {
  height: 80vh;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;

  /* firefox */
  scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
  scrollbar-width: auto;

  /* chrome */
  &::-webkit-scrollbar,
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(197, 197, 197);
  }
}

/* 参数 */
.h_info {
  padding: 5px;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
}

/* 参数标题 */
.h_info_lable {
  padding-left: 3px;
  width: 150px;
}

/* 参数变量 */
.h_info_val {
  width: 100%;
  margin-right: 5px;
}

// 编辑项目
.edit_item {
  margin-bottom: 10px;
  border: 1px solid rgb(50, 50, 50);

  &:hover {
    border: 1px solid rgb(89, 154, 91);
  }
}
</style>
